<template>
  <div class="jst_main">
    <div class="jst_head">
      <div class="jst-filter">
        <div style="line-height: 24px;">
          <div class="show-title">Hi {{ currnetUserName }}</div>
          <div class="show-des">
            Welcome back to hightrast backend management
          </div>
        </div>
        <div style="display: flex;">
          <div class="filter-btns">
            <div
              class="btn-item"
              :class="btnIndex == b ? 'btn-active' : 'btn-unactive'"
              v-for="(btn, b) in btns"
              :key="b"
              @click="btnClick(btn, b)"
            >
              {{ btn.name }}
            </div>
          </div>
          <div class="daterange">
            <el-date-picker
              v-model="dateTime"
              type="daterange"
              size="small"
              range-separator="-"
              start-placeholder="Start time"
              end-placeholder="End time"
              @change="changeDate"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </div>
          <!-- <div class="search">
            <el-input
              placeholder="Search Product Title..."
              size="small"
              prefix-icon="el-icon-search"
              v-model="queryVals.title"
              @keyup.native.enter="getPageInfo()"
            >
            </el-input>
          </div> -->
        </div>
      </div>
      <div class="jst_content">
        <div class="add-filter">
          <el-button
            @click="openFilter(null)"
            type="primary"
            icon="el-icon-plus"
            class="Add"
            >Add Filter</el-button
          >
          <div class="filter-tags">
            <el-tag
              type="warning"
              closable
              style="margin-left: 12px;"
              @close="closeTag(item)"
              @click="openFilter(item)"
              v-for="(item, index) in filterVals"
              :key="item.label"
            >
              <span :title="item.label + ':' + item.labelValue">
                {{ item.label }}:{{ item.labelValue }}
              </span>
            </el-tag>
          </div>
        </div>

        <el-table
          ref="tableRef"
          class="table-detail"
          :height="pageHeight"
          :header-cell-style="{
            background: '#FFFDF4',
            color: '#26497e',
            'font-szie': '12px'
          }"
          :data="pageTicket"
          :show-summary="true"
          :summary-method="summaryMethod"
          @sort-change="sortChange"
          :row-class-name="tableRowClassName"
        >
          <!-- <el-table-column
            prop="Id"
            label="No"
            width="60"
            align="center"
            header-align="center"
          /> -->
          <el-table-column
            prop="orderNumber"
            label="Order Number"
            min-width="140"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
          />
          <el-table-column
            prop="designer"
            label="Designer"
            min-width="120"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
          />
          <el-table-column
            prop="image"
            label="Image"
            min-width="120"
            align="center"
            header-align="center"
          >
            <template slot-scope="scope">
              <!-- <img :src="scope.row.image" :min-width="70" /> -->
              <el-image
                style="width: 70px; height: 70px;border-radius: 15px;"
                :src="scope.row.image"
                fit="cover"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="variantTitle"
            label="Viarant"
            min-width="120"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
          />
          <el-table-column
            prop="productType"
            label="Product Type"
            min-width="120"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
          />

          <el-table-column
            prop="createdAt"
            label="Order Time"
            min-width="120"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
          >
            <template slot-scope="scope">
              <span>{{ dayjs(scope.row.createdAt).format("DD/MM/YYYY") }}</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="originalPrice"
            label="Original Price"
            min-width="140"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
          >
            <template slot-scope="scope">
              <span>US${{ scope.row.originalPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="totalDiscount"
            label="Tolal Discount"
            min-width="140"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
          >
            <template slot-scope="scope">
              <span>US${{ scope.row.totalDiscount }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="discountType"
            label="Discount Type"
            min-width="130"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
          />
          <el-table-column
            prop="finalPrice"
            label="Final Price"
            min-width="130"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
          >
            <template slot-scope="scope">
              <span
                >US${{ scope.row.primaryItemIdType === 1 ? "-" : ""
                }}{{ scope.row.finalPrice }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="quantity"
            label="Quantity"
            min-width="120"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
          >
            <template slot-scope="scope">
              <span>
                {{ scope.row.primaryItemIdType === 1 ? "-" : ""
                }}{{ scope.row.quantity }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="paybackStatus"
            label="Payback Status"
            min-width="180"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
          >
            <template slot-scope="scope">
              <div class="row-input">
                <div
                  class="role-input"
                  v-if="'paybackStatus' + scope.$index == editFocus"
                >
                  <!-- <el-input
                    :id="'paybackStatus' + scope.$index"
                    style="width: 180px;"
                    class="editNum"
                    v-model="scope.row.paybackStatusStr"
                    type="number"
                    :controls="false"
                    @blur="blurInput(scope.row)"
                  ></el-input> -->
                  <el-select
                    :id="'paybackStatus' + scope.$index"
                    style="width: 130px;margin-left:5px;"
                    v-model="scope.row.paybackStatus"
                    filterable
                    placeholder="请选择"
                    @change="blurInput(scope.row)"
                  >
                    <el-option
                      v-for="item in paybackStateList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
                <span v-else>{{ scope.row.paybackStatusStr }}</span>
                <i
                  class="el-icon-edit row-icon"
                  @click="editRow(scope.row, scope.$index, 'paybackStatus')"
                  v-if="
                    userRoleInfo.roleType === 1 &&
                      scope.row.editPaybackStatus === 1
                  "
                ></i>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="orderStatusStr"
            label="Order Status"
            min-width="130"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
          />
        </el-table>

        <!--分页-->
        <el-row>
          <el-col style="text-align:right;margin-top: 20px">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryVals.page"
              :page-sizes="[5, 10, 50, 100]"
              :page-size="queryVals.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </el-col>
        </el-row>

        <el-dialog
          title="Add Filter"
          :visible.sync="dialogFormVisible"
          width="45%"
          style="margin: 0 auto;"
        >
          <div style="height: 50vh" class="dialog-content">
            <div class="left-list">
              <div
                v-for="(item, index) in filters"
                :key="index"
                class="filter-item"
                :class="filterIndex == index ? 'filter-active' : ''"
                @click="filter(item, index)"
              >
                {{ item.label }}
              </div>
            </div>
            <div class="right-info">
              <div
                v-if="
                  filterVal == 'Designer' ||
                    filterVal == 'Product Type' ||
                    filterVal == 'Order Number' ||
                    filterVal == 'Viarant' ||
                    filterVal == 'Discount Type' ||
                    filterVal == 'Payback Status' ||
                    filterVal == 'Order Status'
                "
              >
                <div class="designer-list" v-if="filterVal == 'Designer'">
                  <div class="filter-search">
                    <el-input
                      placeholder="Search..."
                      size="small"
                      prefix-icon="el-icon-search"
                      v-model="userVal"
                      @input="inputVal"
                    >
                    </el-input>
                  </div>
                  <div
                    v-for="(item, index) in userList"
                    :key="index"
                    class="designer-item"
                    @click="designer(item, index)"
                    :class="
                      filters[filterIndex].value == item.id
                        ? 'designer-active'
                        : ''
                    "
                  >
                    {{ item.userName }}
                  </div>
                </div>
                <div class="filter-search" v-if="filterVal == 'Order Number'">
                  <el-input
                    placeholder="Input..."
                    size="small"
                    prefix-icon="el-icon-search"
                    v-model="searchVal"
                    @input="inputVal"
                  >
                  </el-input>
                </div>
                <div class="designer-list" v-if="filterVal == 'Product Type'">
                  <div class="filter-search">
                    <el-input
                      placeholder="Search..."
                      size="small"
                      prefix-icon="el-icon-search"
                      v-model="productVal"
                      @input="inputVal"
                    >
                    </el-input>
                  </div>
                  <div
                    v-for="(item, index) in productTypeList"
                    :key="index"
                    class="designer-item"
                    @click="designer(item, index)"
                    :class="
                      filters[filterIndex].value == item
                        ? 'designer-active'
                        : ''
                    "
                  >
                    {{ item }}
                  </div>
                </div>

                <div class="designer-list" v-if="filterVal == 'Viarant'">
                  <div class="filter-search">
                    <el-input
                      placeholder="Search..."
                      size="small"
                      prefix-icon="el-icon-search"
                      v-model="viarantVal"
                      @input="inputVal"
                    >
                    </el-input>
                  </div>
                  <div
                    v-for="(item, index) in variantTitleList"
                    :key="index"
                    class="designer-item"
                    @click="designer(item, index)"
                    :class="
                      filters[filterIndex].value == item
                        ? 'designer-active'
                        : ''
                    "
                  >
                    {{ item }}
                  </div>
                </div>
                <div class="designer-list" v-if="filterVal == 'Discount Type'">
                  <div
                    v-for="(item, index) in discountTypeList"
                    :key="index"
                    class="designer-item"
                    @click="designer(item, index)"
                    :class="
                      filters[filterIndex].value == item.type
                        ? 'designer-active'
                        : ''
                    "
                  >
                    {{ item.type }}
                  </div>
                </div>
                <div class="designer-list" v-if="filterVal == 'Payback Status'">
                  <div
                    v-for="(item, index) in paybackStatusList"
                    :key="index"
                    class="designer-item"
                    @click="designer(item, index)"
                    :class="
                      filters[filterIndex].value == item.type
                        ? 'designer-active'
                        : ''
                    "
                  >
                    {{ item.name }}
                  </div>
                </div>
                <div class="designer-list" v-if="filterVal == 'Order Status'">
                  <div
                    v-for="(item, index) in orderStatusList"
                    :key="index"
                    class="designer-item"
                    @click="designer(item, index)"
                    :class="
                      filters[filterIndex].value == item.type
                        ? 'designer-active'
                        : ''
                    "
                  >
                    {{ item.name }}
                  </div>
                </div>
              </div>
              <div v-else>
                <el-input
                  style="width: 130px;"
                  placeholder="Minimum value"
                  size="small"
                  v-model="minVal"
                  @input="inputMin"
                ></el-input>
                <!-- <span v-if="filterVal == 'Current Commisson Rate'">%</span> -->
                <span style="margin: 0 8px;">-</span>
                <el-input
                  style="width: 130px;"
                  placeholder="Maximum value"
                  size="small"
                  v-model="maxVal"
                  @input="inputMax"
                ></el-input>
                <!-- <span v-if="filterVal == 'Current Commisson Rate'">%</span> -->
              </div>
            </div>
          </div>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">Cancel</el-button>
            <el-button type="warning" @click="confirm">Confirm</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import { getUserInfo, queryUserList } from "../../api/userService";
import {
  updateProducts,
  queryVariantsTitle,
  queryProductType
} from "../../api/productService";
import {
  queryOrderItemPage,
  updateOrderProductItemsPaybackStatus
} from "../../api/orderService";
import dayjs from "dayjs";
import { Row } from "element-ui";
import Decimal from "decimal.js";
export default {
  components: {},
  data() {
    return {
      dialogFormVisible: false,
      pageHeight: 0,
      total: 0, //总数据条数
      filterIndex: 0, // 筛选弹框选中左侧索引
      btnIndex: -1, // 快速组件选中数据索引
      editFocus: "", // 分页列表搜索框获取焦点
      // word: "",
      maxVal: "", // 筛选弹框输入最大值
      minVal: "", // 筛选弹框输入最小值
      filterVal: "Designer", // 筛选弹框选中左侧值
      searchVal: "", // 筛选弹框单个输入模糊搜索
      userVal: "", // 筛选弹框右侧用户搜索输入
      productVal: "", //筛选弹框右侧product type搜索输入
      viarantVal: "", // 筛选弹框右侧Viarant搜索输入
      // discountTypeVal: "", // 筛选弹框右侧Discount Type搜索输入
      // paybackStatusVal: "", // 筛选弹框右侧Payback Status搜索输入
      dateTime: [], // 日期组件选中数据
      pageTicket: [], //分页后的当前页数据
      btns: [
        { name: "LAST 7 DAYS", value: "1" },
        { name: "LAST MONTH", value: "2" },
        { name: "TODAY", value: "3" }
      ], // 快速日期
      // 筛选弹框左侧列表数据
      filters: [
        {
          label: "Order Number", //展示名
          value: "", // 选中数据、输入模糊数据
          maxVal: "", // 输入最大值
          minVal: "", // 输入最小值
          startProp: "orderNumber", // 查询参数名开始字段名，也包括输入和选中字段名
          endProp: "", // 输入结束字段名
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },
        {
          label: "Product Type",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "productType",
          endProp: "",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },
        {
          label: "Viarant",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "variantTitle",
          endProp: "",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },
        {
          label: "Original Price",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "startOriginalPrice",
          endProp: "endOriginalPrice",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },
        {
          label: "Total Discount",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "startTotalDiscount",
          endProp: "endTotalDiscount",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },
        {
          label: "Discount Type",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "discountType",
          endProp: "",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },
        {
          label: "Final Price",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "startFinalPrice",
          endProp: "endFinalPrice",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },
        {
          label: "Quantity",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "startQuantity",
          endProp: "endQuantity",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },
        {
          label: "Payback Status",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "paybackStatus",
          endProp: "",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },

        {
          label: "Order Status",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "orderStatus",
          endProp: "",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        }
      ],
      filterVals: [], // 筛选的总类型数组
      userList: [], // 用户列表数据
      tempUserList: [], // 筛选的用户列表数据
      productTypeList: [], // 商品类型列表数据
      tempProductTypeList: [], // 筛选的商品类型列表数据
      variantTitleList: [], // 商品变体名称列表数据
      tempVariantTitleList: [], // 筛选的商品变体名称列表数据
      discountTypeList: [
        { type: "fixed_amount" },
        { type: "percentage" },
        { type: "shipping" }
      ], // 商品折扣类型名称列表数据
      paybackStatusList: [
        { name: "Issuing", type: 1 },
        { name: "Return Goods", type: 2 },
        { name: "Issued", type: 3 }
      ], // 给客户付款状态名称列表数据
      orderStatusList: [
        { name: "Goods Received", type: 1 },
        { name: "Return Goods", type: 2 },
        { name: "In Transit", type: 3 }
      ], // 订单状态名称列表数据
      // 查询用户角色返回json
      userRoleInfo: {},
      // 查询参数
      queryVals: {
        asc: true,
        title: "",
        variantTitle: "",
        startTotalDiscount: null,
        endTotalDiscount: null,
        discountType: "",
        startFinalPrice: null,
        endFinalPrice: null,
        startQuantity: null,
        endQuantity: null,
        orderNumber: "",
        productType: "",
        startOriginalPrice: null,
        endOriginalPrice: null,
        startCreatedAt: "",
        endCreatedAt: "",
        selectUserId: null,
        page: 1,
        pageSize: 10,
        orderField: "",
        paybackStatus: null,
        orderStatus: null
      },
      dayjs: dayjs,
      tempRow: {},
      currnetUserName: "",
      paybackStateList: [
        {
          label: "Issuing",
          value: 1
        },
        {
          label: "Return Goods",
          value: 2
        },
        {
          label: "Issued",
          value: 3
        }
      ],
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.updatePageHeight();
    });
    // 监听窗口大小变化事件
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    // 组件销毁前，移除窗口大小变化事件的监听，避免内存泄漏
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    handleResize() {
      // 更新窗口宽度和高度的状态
      this.windowWidth = window.innerWidth;
      this.windowHeight = window.innerHeight;
      // 可以在这里添加根据宽高判断的逻辑
      if (this.windowWidth < 768) {
        console.log("当前是手机端屏幕");
      } else {
        console.log("当前是桌面端屏幕");
      }
      this.updatePageHeight();
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.primaryItemIdType === 1) {
        return "red-row";
      }
      return "";
    },
    // 分页列表中修改列点击图标进入输入事件
    editRow(row, index, mode) {
      this.tempRow = JSON.parse(JSON.stringify(row));
      let nameRef = mode + index;
      this.editFocus = nameRef;
      this.$nextTick(() => {
        // this.$refs[nameRef].focus();
        document.getElementById(nameRef).focus();
      });
    },
    // 分页列表中修改列数据事件
    blurInput(row) {
      this.$confirm(this.$t("home.productTip"), "", {
        confirmButtonText: "Change",
        cancelButtonText: "Cancel",
        type: "error",
        center: true,
        roundButton: true,
        cancelButtonClass: "cancel-button-class",
        confirmButtonClass: "confirm-button-class"
      }).then(async () => {
        var templateObj = {
          id: row.orderItemId,
          paybackStatus: row.paybackStatus
        };
        await updateOrderProductItemsPaybackStatus(templateObj).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg);
            this.editFocus = "";
            this.getPageInfo();
          } else {
            this.$message.error(res.msg);
          }
        });
      });
      // .catch(() => {
      //   row.commissonRate = this.tempRow.commissonRate;
      //   row.price = this.tempRow.price;
      //   row.sampleCost = this.tempRow.sampleCost;
      //   this.editFocus = "";
      // });
    },
    // 筛选弹框右侧列表项选中事件
    designer(item) {
      switch (this.filterVal) {
        case "Designer":
          this.filters[this.filterIndex].value = item.id;
          this.filters[this.filterIndex].selectName = item.userName;
          break;
        case "Product Type":
          this.filters[this.filterIndex].value = item;
          this.filters[this.filterIndex].selectName = item;
          break;
        case "Viarant":
          this.filters[this.filterIndex].value = item;
          this.filters[this.filterIndex].selectName = item;
          break;
        case "Discount Type":
          this.filters[this.filterIndex].value = item.type;
          this.filters[this.filterIndex].selectName = item.type;
          break;
        case "Payback Status":
          this.filters[this.filterIndex].value = item.type;
          this.filters[this.filterIndex].selectName = item.name;
          break;
        case "Order Status":
          this.filters[this.filterIndex].value = item.type;
          this.filters[this.filterIndex].selectName = item.name;
          break;
        default:
          break;
      }
    },
    // 筛选弹框取消事件
    closeTag(item) {
      this.filterVals = this.filterVals.filter(c => {
        if (c.label == item.label) {
          this.queryVals[c.startProp] = null;
          this.queryVals[c.endProp] = null;
        }
        return c.label != item.label;
      });
      this.queryVals.page = 1;
      this.getPageInfo();
    },
    // 筛选弹框中最小项输入事件
    inputMin(val) {
      this.filters[this.filterIndex].minVal = val;
    },
    // 筛选弹框中最大项输入事件
    inputMax(val) {
      this.filters[this.filterIndex].maxVal = val;
    },
    // 筛选弹框项中输入搜索事件
    inputVal(val) {
      switch (this.filterVal) {
        case "Designer":
          if (val) {
            this.userList = this.tempUserList.filter(array =>
              array.userName.match(val)
            );
          } else {
            this.userList = this.tempUserList;
          }
          break;
        case "Product Type":
          if (val) {
            this.productTypeList = this.tempProductTypeList.filter(array =>
              array.match(val)
            );
          } else {
            this.productTypeList = this.tempProductTypeList;
          }
          break;
        case "Viarant":
          if (val) {
            this.variantTitleList = this.tempVariantTitleList.filter(array =>
              array.match(val)
            );
          } else {
            this.variantTitleList = this.tempVariantTitleList;
          }
          break;
        case "Order Number":
          this.filters[this.filterIndex].value = val;
        default:
          break;
      }
    },
    // 筛选确认弹框筛选事件
    confirm() {
      this.dialogFormVisible = false;
      this.filterVals = this.filters.filter(c => {
        if (c.maxVal) {
          this.queryVals[c.startProp] = c.minVal;
          this.queryVals[c.endProp] = c.maxVal;
          c.labelValue = c.minVal + "-" + c.maxVal;
        }
        if (c.value) {
          if (
            c.label === "Product Type" ||
            c.label === "Designer" ||
            c.label === "Viarant" ||
            c.label === "Payback Status" ||
            c.label === "Order Status"
          ) {
            if (c.label === "Product Type") {
              c.labelValue = c.selectName ? c.selectName : this.productVal;
            } else if (c.label === "Designer") {
              c.labelValue = c.selectName ? c.selectName : this.userVal;
            } else if (c.label === "Viarant") {
              c.labelValue = c.selectName ? c.selectName : this.viarantVal;
            } else if (c.label === "Payback Status") {
              c.labelValue = c.selectName ? c.selectName : this.userVal;
            } else if (c.label === "Order Status") {
              c.labelValue = c.selectName ? c.selectName : this.viarantVal;
            }
          } else {
            c.labelValue = c.value;
          }
          this.queryVals[c.startProp] = c.value;
        }
        return c.value || c.maxVal;
      });
      this.queryVals.page = 1;
      this.getPageInfo();
      // this.clearFilter();
    },
    // 筛选弹框左侧列项点击事件
    filter(item, index) {
      this.filterIndex = index;
      this.filterVal = item.label;
      this.maxVal = this.filters[this.filterIndex].maxVal;
      this.minVal = this.filters[this.filterIndex].minVal;
      if (item.label != "Designer")
        this.searchVal = this.filters[this.filterIndex].value;
    },
    // clearFilter() {
    //   this.filters.forEach(item => {
    //     this.maxVal = "";
    //     this.minVal = "";
    //     this.searchVal = "";
    //     this.userVal = "";
    //     this.productVal = "";
    //   });
    // },
    // 筛选弹框弹出事件
    openFilter(flItem) {
      if (flItem) {
        this.filterIndex = flItem.labelIndex;
        this.filterVal = flItem.label;
      }
      this.filters.forEach((item, index) => {
        let val = this.filterVals.find(c => c.label == item.label);
        if (val) {
          item = val;
        } else {
          item.maxVal = "";
          item.minVal = "";
          item.value = "";
        }
      });
      this.maxVal = this.filters[this.filterIndex].maxVal;
      this.minVal = this.filters[this.filterIndex].minVal;
      this.searchVal = this.filters[this.filterIndex].value;
      // 这一句一定要在最后
      this.$nextTick(() => {
        this.dialogFormVisible = true;
      });
    },
    // 主页页面按钮点击快速日期筛选事件
    btnClick(item, index) {
      if (this.btnIndex == index) this.btnIndex = -1;
      else this.btnIndex = index;
      if (item.value == "1") {
        // 7天
        this.queryVals.startCreatedAt = dayjs()
          .subtract(7, "day")
          .format("YYYY-MM-DD");
        this.queryVals.endCreatedAt = dayjs().format("YYYY-MM-DD");
      } else if (item.value == "2") {
        // month
        this.queryVals.startCreatedAt = dayjs()
          .date(1)
          .format("YYYY-MM-DD");
        this.queryVals.endCreatedAt = dayjs().format("YYYY-MM-DD");
      } else {
        // 今天
        this.queryVals.startCreatedAt = dayjs().format("YYYY-MM-DD");
        this.queryVals.endCreatedAt = dayjs().format("YYYY-MM-DD");
      }
      if (this.btnIndex == -1) {
        this.queryVals.startCreatedAt = "";
        this.queryVals.endCreatedAt = "";
      }
      this.dateTime = [];
      this.queryVals.page = 1;
      this.getPageInfo();
    },
    changeEdit(row) {
      this.pageTicket.forEach((item, index) => {
        if (item.id == row.id) item.isEdit = false;
        else item.isEdit = true;
      });
      this.$refs.tableRef.doLayout();
    },
    // 日期组件事件选择事件
    changeDate(date) {
      this.btnIndex = -1;
      this.queryVals.page = 1;
      if (date) {
        this.queryVals.startCreatedAt = date[0];
        this.queryVals.endCreatedAt = date[1];
        this.getPageInfo();
      } else {
        this.queryVals.startCreatedAt = "";
        this.queryVals.endCreatedAt = "";
        this.getPageInfo();
      }
    },
    // 分页列表排序事件
    sortChange(column, prop, order) {
      console.log(column, prop, order);
      if (column.order == null) {
        this.queryVals.asc = null;
      } else if (column.order === "ascending") {
        this.queryVals.asc = true;
      } else if (column.order === "descending") {
        this.queryVals.asc = false;
      }
      this.queryVals.orderField = column.prop;
      this.queryVals.page = 1;
      this.getPageInfo();
    },
    updatePageHeight() {
      // const pageHeight = window.innerHeight;
      this.pageHeight = this.windowHeight - 240;
    },
    // AddSubclass(index, row) {
    //   console.log(index, row);
    // },
    // handleEdit(index, row) {
    //   console.log(index, row);
    // },
    // handleDelete(index, row) {
    //   console.log(index, row);
    // },
    // handleClose(done) {
    //   this.$confirm("确认关闭？")
    //     .then(_ => {
    //       done();
    //     })
    //     .catch(_ => {});
    // },
    // 表头渲染事件
    renderHeader(h, { column, $index }) {
      if (column.order === "ascending") {
        return (
          <div>
            <span>{column.label}</span>
            <i class="el-icon-sort-up"></i>
          </div>
        );
      } else if (column.order === "descending") {
        return (
          <div>
            <span>{column.label}</span>
            <i class="el-icon-sort-down"></i>
          </div>
        );
      } else {
        return (
          <div>
            <span>{column.label}</span>
            <i class="el-icon-sort"></i>
          </div>
        );
      }
    },
    // 获取当前页的数据信息
    async getPageInfo() {
      const res = await queryOrderItemPage(this.queryVals);
      if (res.code === 200) {
        this.pageTicket = res.data.records;
        this.pageTicket.forEach(item => {
          item.editPaybackStatus = item.paybackStatus;
        });
        // this.pageTicket.forEach(item => {
        //   item.isEdit = true;
        // })
        this.total = res.data.total;
      }
      this.$nextTick(() => {
        this.$refs.tableRef.doLayout();
      });
    },
    //分页时修改每页的行数,这里会自动传入一个size
    handleSizeChange(size) {
      //修改当前每页的数据行数
      this.queryVals.pageSize = size;
      //数据重新分页
      this.getPageInfo();
    },
    //调整当前的页码
    handleCurrentChange(pageNumber) {
      //修改当前的页码
      this.queryVals.page = pageNumber;
      //数据重新分页
      this.getPageInfo();
    },

    summaryMethod({ columns, data }) {
      const sums = [];
      const summaryColumns = ["originalPrice", "finalPrice", "quantity"];
      columns.forEach((column, index) => {
        if (summaryColumns.includes(column.property)) {
          let total = new Decimal(0);
          data.forEach(row => {
            total = total.add(new Decimal(row[column.property] || 0));
          });
          sums.push(Number(total.toFixed(2)));
        } else {
          sums.push("");
        }
      });
      return sums;
    },

    async getUserInfoByToken() {
      const res = await getUserInfo();
      if (res.code === 200) {
        this.userRoleInfo = res.data.userRole;
        this.currnetUserName = res.data.userName;
        if (res.data.userRole != null && res.data.userRole.roleType === 1) {
          // 管理者权限才能筛选用户
          this.initUser();
          this.filters.unshift({
            label: "Designer",
            value: "",
            maxVal: "",
            minVal: "",
            startProp: "selectUserId",
            endProp: "",
            labelValue: "",
            labelIndex: "",
            selectName: ""
          });
        }
      } else {
        this.$message.error(res.msg);
      }
      this.filters.forEach((item, index) => {
        item.labelIndex = index;
      });
    },
    async initUser() {
      const res = await queryUserList({ page: 1, pageSize: -1 });
      if (res.code === 200) {
        this.userList = res.data.records;
        this.tempUserList = JSON.parse(JSON.stringify(this.userList));
      } else {
        this.$message.error(res.msg);
      }
    },
    async queryVariantsTitle() {
      const res = await queryVariantsTitle();
      if (res.code === 200) {
        this.variantTitleList = res.data;
        this.tempVariantTitleList = JSON.parse(
          JSON.stringify(this.variantTitleList)
        );
      } else {
        this.$message.error(res.msg);
      }
    },
    async queryProductType() {
      const res = await queryProductType();
      if (res.code === 200) {
        this.productTypeList = res.data;
        this.tempProductTypeList = JSON.parse(
          JSON.stringify(this.productTypeList)
        );
      } else {
        this.$message.error(res.msg);
      }
    },
    async changePaybackState(id, paybackStatus) {
      var templateObj = { id: id, paybackStatus: paybackStatus };
      await updateOrderProductItemsPaybackStatus(templateObj).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg);
          this.getPageInfo();
        } else {
          this.$message.error(res.msg);
        }
      });
    }
  },
  created() {
    this.getUserInfoByToken();
    this.getPageInfo();
    this.queryVariantsTitle();
    this.queryProductType();
  }
};
</script>
<style scoped>
.jst_main {
  /* height: 100%; */
  background: #fffdf4;
  padding: 15px;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.jst_content {
  flex: 1;
  overflow-y: auto;
}
.jst_head {
  width: 100%;
  /* height: 100%; */
  background: #fffdf4;
}
.jst-filter {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* 超出部分隐藏 */
  overflow-y: hidden;
  overflow-x: auto;
}
.jst-filter::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.add-filter {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 0 10px 10px;
}
.filter-tags {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.show-title {
  font-size: 26px;
  color: #333333;
  font-style: italic;
}
.show-des {
  font-size: 13px;
  color: #727272;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-shrink: 1; /* 允许子项缩小 */
}
.daterange .el-date-editor {
  width: 240px;
  height: 34px;
  border-radius: 10px;
  box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.2);
}
.search {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.search .el-input {
  margin: 5px 0 0 20px;
  overflow: hidden;
  border-radius: 10px;
  height: 34px;
  line-height: 34px;
  box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.2);
}
/deep/ .el-dialog {
  border-radius: 20px;
}
/deep/ .search .el-input__inner {
  border: none;
}
.filter-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 6px;
  margin-right: 30px;
}
.filter-btns .btn-item {
  color: #666;
  font-size: 13px;
  margin: 0 10px;
  padding: 0 10px;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}
.filter-btns .btn-active {
  background: #ffba88;
}
.row-icon {
  color: #ffba88;
  cursor: pointer;
  margin-left: 6px;
  font-size: 18px;
}
.jst_content {
  width: 100%;
  /* height: 100%; */
  background: #fffdf4;
}
.row-input {
  display: flex;
  justify-content: center;
  align-items: center;
}
.jst_content .Add {
  color: #666666;
  background: #ffba88;
  border: 1px solid #ffba88;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 500;
  padding: 8px 20px;
  font-size: 14px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
.designer-active {
  background-color: #ffba88;
  border-radius: 4px;
}
.dialog-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.dialog-content .filter-item {
  cursor: pointer;
  border-radius: 8px;
  padding: 0 10px;
}
.dialog-content .filter-active {
  background: #ffba88;
}
.dialog-content .left-list {
  width: 200px;
  height: 50vh;
  border-right: 1px solid #f1f1f1;
  padding-right: 15px;
}
.role-input {
  display: flex;
  justify-content: center;
  align-items: center;
}
.role-input span {
  margin-left: 8px;
  cursor: pointer;
}
.role-input span i {
  color: #ffba88;
  font-size: 18px;
}
.dialog-content .right-info {
  width: 340px;
  margin-left: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.designer-list {
  height: calc(50vh - 50px);
  overflow-y: auto;
  /* width: 320px;
  padding-right: 10px; */
}
.dialog-content .right-info .designer-item {
  cursor: pointer;
  padding-left: 13px;
}
.editNum {
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
}
/deep/ .dialog-content .right-info .el-input__inner {
  border: none;
  background: #ffba88;
}
/deep/ .dialog-content .right-info .filter-search .el-input__inner {
  background-color: transparent !important;
}
/deep/ .dialog-content .right-info .el-input__inner::placeholder {
  color: #333333;
}
/deep/
  .dialog-content
  .right-info
  .filter-search
  .el-input__inner::placeholder {
  color: #999999;
}
.el-tag.el-tag--warning {
  background: #ffba88;
  height: 32px;
  /* 设置标签最大宽度，可根据实际情况调整 */
  max-width: 150px;

  display: flex;
  /* justify-content: center; */
  /* align-items: center; */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: none;
  color: #666666;
  cursor: pointer; /* 将鼠标指针样式设置为小手 */
}

.el-tag.el-tag--warning span {
  /* 不换行 */
  white-space: nowrap;
  /* 超出部分隐藏 */
  overflow: hidden;
  /* 超出部分显示省略号 */
  text-overflow: ellipsis;
  cursor: pointer; /* 将鼠标指针样式设置为小手 */
  /* 动态绑定 title 属性 */
  :title="item.label + ':' + item.labelvalue" ;
}

/* 使用 Vue 的深度选择器，确保样式可以穿透到组件内部 */
.el-tag.el-tag--warning span:hover::after {
  content: attr(title); /* 显示 title 属性的内容 */
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 20px;
  z-index: 1;
  white-space: normal; /* 允许换行 */
  word-wrap: break-word; /* 允许单词内换行 */
}

/* 为 span 元素添加 title 属性，显示完整的文本内容 */
.el-tag.el-tag--warning span {
  title: attr(
    data-original-text
  ); /* 使用 data-original-text 属性作为 title 属性的值 */
}

/* 使用 Vue 的深度选择器，确保样式可以穿透到组件内部 */
.el-tag.el-tag--warning span {
  position: relative; /* 确保子元素的定位是相对于 span 元素的 */
}
/deep/ .el-tag.el-tag--warning .el-tag__close {
  margin-top: 4px;
  color: #666666 !important;
}
/deep/ .caret-wrapper {
  display: none !important;
}

/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #fffdf4;
}
.el-table {
  padding-bottom: 5px;
}
.el-table,
.el-table__expanded-cell {
  background-color: #fff;
}

/deep/ .el-table__header-wrapper .cell {
  font-size: 12px !important;
}
/* 非斑马纹颜色 */
/deep/ .el-table tr {
  background: #fff;
}

/* 表格的边框设置没有边框 */
/deep/ .el-table td,
.building-top .el-table th.is-leaf {
  border: none;
  /* color: white; */
}

.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #fffdf4;
}

/* 鼠标滑过表格某一行时的颜色 */
/* /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #fffdf4;
} */

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #ffcc7e;
  color: #000;
}

/deep/ .el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
  margin: 0 5px;
  background-color: #fff;
  color: #000;
  min-width: 30px;
  border-radius: 4px;
  border: 1px solid #b2b8c2;
}
/deep/ .el-table__footer-wrapper tbody td.el-table__cell {
  background-color: #ffffff;
  margin-bottom: 5px;
}
/* 汇总行样式 */
/deep/ .el-table__footer {
  background: #fff;
}

/* 给汇总行的某些中间单元格加边框，例如3和4列 */
/deep/ .el-table__footer td:nth-child(7) .cell {
  background: #ffe298 !important;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  margin: 0 10px;
}
/deep/ .el-table__footer td:nth-child(10) .cell {
  background: #ffe298 !important;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  margin: 0 10px;
}
/deep/ .el-table__footer td:nth-child(11) .cell {
  background: #ffe298 !important;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  margin: 0 10px;
}
/deep/ .el-table__footer td {
  background: #ffffff !important;
  border: none !important;
}
/deep/ .el-table__fixed-right::before {
  display: none;
}
/deep/ .el-table__fixed-body-wrapper {
  overflow-y: auto;
}
</style>
<style>
html {
  overflow: hidden;
}
</style>
